<template>
  <div class="dad">
    <!-- 标题区域 ------------------------------------------------->
    <div class="title">
      <div class="titlebox">
        <img src="../public/hustlogo.png" class="titlepic">
        <h1>襄北大桥转体-三维可视化监测系统</h1>
      </div>

      <div class="messagebox">
        华中科技大学土木与水利工程学院
        <p>027-87544331 &nbsp;| &nbsp; Lab4331@163.com</p>  
      </div>
      
      <div class="something">

        <el-popover
          placement="top-start"
          title="减隔震中心"
          width="180"
          trigger="click"
          class="account"
        >
          <img  style="width:180px" src="../public/二维码.jpg" alt="">
          <el-button  size="medium" type="primary" slot="reference">
            公众号
          </el-button>
        </el-popover>

        <el-button size="medium" type="primary" @click="fullScreenLoad()">
          <i
            :class="isFullScreen ? 'el-icon-crop' : 'el-icon-full-screen'"
            class="backPage"
            >{{ isFullScreen ? "退出全屏" : "全屏" }}</i
          >
        </el-button>

        <el-button
          v-if="show"
          type="primary"
          size="medium"
          @click="show = !show"
        >
          显示模型<i class="el-icon-camera"></i>
        </el-button>
        <el-button v-else type="primary" size="medium" @click="show = !show">
          显示全部<i class="el-icon-view"></i>
        </el-button>

      </div>

    </div>
    <!-- 盒子们的区域 ------------------------------------------------->
    <div class="middle">
      <!-- 左边区域 ---------------------------------------------->
      <transition enter-active-class="animate__animated animate__fadeInUp">
        <div class="box" v-show="show">
          <!-- 自适应高度填充假盒子 -->
          <div class="fakebox1"></div>
          <div class="panel weather">
            <!-- 天气预报 -->
            <Weather />
          </div>
          <!-- 自适应高度填充假盒子 -->
          <div class="fakebox2"></div>
          <!-- 左2倾角 -->
          <div class="panel dipangle" id="dipangle">
            <DipAngle />
          </div>
          <!-- 自适应高度填充假盒子 -->
          <div class="fakebox2"></div>
          <!-- 左3支腿反力 -->
          <div class="panel deflection" id="deflection">
            <Deflection />
          </div>
          <!-- <div class="panel speed" id="speed">
            <Speed />
          </div> -->
        </div>
      </transition>
      <!-- 中间 ------------------------------------------>
      <div class="box box_middle" id="midbox">
        <!-- 模型视窗 -->
        <div class="window"></div>
        <!-- 自适应高度填充假盒子 -->
        <div class="bigfakebox"></div>
        <!-- 实时数据 -->
        <div class="namebox">
          <div class="name"></div>
        </div>
        <div class="timedata">
          <TimeData />
        </div>
      </div>
      <!-- 右边区域---------------------------------------------- -->
      <!-- 右边信息栏 -->
      <transition enter-active-class="animate__animated animate__fadeInUp">
        <div class="box" v-show="show">
          <!-- 自适应高度填充假盒子 -->
          <div class="fakebox1"></div>
          <!-- 信息饼图 -->
          <div class="panel message">
            <Message ref="paintchart"/>
          </div>
          <!-- 自适应高度填充假盒子 -->
          <div class="fakebox2"></div>
          <!-- 右2应力 -->
          <div class="panel stress" id="stress">
            <Stress />
          </div>
          <!-- 自适应高度填充假盒子 -->
          <div class="fakebox2"></div>
          <!-- 右3加速度与挠度 -->
          <div class="panel speed" id="speed">
            <Speed />
          </div>
          <!-- <div class="panel deflection" id="deflection">
            <Deflection />
          </div> -->
        </div>
      </transition>
    </div>
    <!-- 背景大模型 -->
    <Project class="mode" ref="pro" @modeload="callclose" />
  </div>
</template>

<script>
import Project from "./try/mode.vue";
//到时候删除的曲线
import DipAngle from "./components/DipAngle.vue";
import Speed from "./components/Speed.vue";
import Message from "./components/message.vue";
import Weather from "./components/weather.vue";
import TimeData from "./components/timedata.vue";
import Stress from "./components/Stress.vue";
import Deflection from "./components/Deflection.vue";
import { mapMutations, mapActions } from "vuex";
// 动画效果引入
import "animate.css";

export default {
  components: {
    Project,
    // Node,
    DipAngle,
    Speed,
    Message,
    Weather,
    TimeData,
    Stress,
    Deflection,
  },

  data() {
    return {
      // 全部盒子的显示
      show: true,
      fullscreenLoading: false,
      // 底部曲线的显示
      show2: false,
      show1: true,
      // 按钮切换的显示
      show3: "",
      loading: "",
      loadnum: 0,
      // 全屏切换
      isFullScreen: false,
    };
  },
  methods: {
    // 接口函数调用
    ...mapActions(["getBasicData", "getAllData", "getSensorValueData"]),
    // 数据处理函数
    ...mapMutations(["getNewCornor", "getDataFromSV","getspeedrate"]),
    // 接口有序调用
    async stepaxios() {
      let first = await this.getBasicData();
      console.log(first);
      // let second = await this.getAllData(100);
      // console.log(second);
      let third = await this.getSensorValueData();
      // 提取最新cornor
      // this.getNewCornor();
      // 处理sensorvalue数据
      // this.getDataFromSV();
      // 转速
      // this.getspeedrate()
      // 画表格
      this.$refs.paintchart.changedata()
      console.log(third);
      this.callclose();
      // 一分钟请求一次
      setInterval(() => {
        this.getSensorValueData()
        console.log('4s间隔请求数据成功');
      },4000)
    },
    // 加载模型
    getpro() {
      this.$refs.pro.test();
    },
    // 全屏切换
    fullScreenLoad() {
      if (this.isFullScreen) {
        // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        // 全屏显示
        if (document.body.requestFullscreen) {
          document.body.requestFullscreen();
        } else if (document.body.mozRequestFullScreen) {
          document.body.mozRequestFullScreen();
        } else if (document.body.webkitRequestFullScreen) {
          document.body.webkitRequestFullScreen();
        } else if (document.body.msRequestFullscreen) {
          document.body.msRequestFullscreen();
        }
      }
    },
    // 全屏加载
    openFullScreen() {
      this.show = false;
      this.loading = this.$loading({
        lock: true,
        text: "正在加载中，请稍后",
        spinner: "el-icon-loading",
        customClass: "el-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // console.log(this.loading);
    },
    // 子组件通信关闭全屏加载
    callclose() {
      this.loadnum++;
      var k = this.loadnum;
      if (k == 2) {
        this.loading.close();
        this.show = true;
        document.getElementsByClassName("mode")[0].style.visibility = "visible";
        k = 0;
        console.log("加载效果已关闭");
      }
      this.loadnum = k;
    },
  },
  // 生命周期函数问题
  created() {
    // 数据请求
    this.stepaxios();
    //监听各浏览器fullscreenchange 事件处理
    document.addEventListener("fullscreenchange", () => {
      this.isFullScreen = !this.isFullScreen;
    });
    document.addEventListener("mozfullscreenchange", () => {
      this.isFullScreen = !this.isFullScreen;
    });
    document.addEventListener("webkitfullscreenchange", () => {
      this.isFullScreen = !this.isFullScreen;
    });
    document.addEventListener("msfullscreenchange", () => {
      this.isFullScreen = !this.isFullScreen;
    });
  },
  mounted() {
    // 进入页面的时候先运行加载函数
    this.openFullScreen();
    // 请求模型函数
    this.getpro();
  },
};
</script>

<style>
@import url("./style/pc.css");
/* 功能区css */
@import url("./style/modular.css");
/* 天气css */
@import url("./style/weather.css");
/* 圆盘css */
@import url("./style/message.css");
/* 实时数据css */
@import url("./style/timedata.css");
</style>